<!--个人登记预约记录-->
<template>
    <div class="div">
         <!-- 头部 -->
      <van-nav-bar title="登记预约记录" left-text="返回" fixed  @click-left="onClickLeft" left-arrow></van-nav-bar>
         <van-empty description="暂无记录" v-if="state" />
        <div v-else>
        <div class="box">
            <!-- <van-divider dashed>登记</van-divider> -->
             <van-divider content-position="left">姓名&nbsp;&nbsp;&nbsp;&nbsp;<span>{{name}}</span><div class="status">已完成</div></van-divider>
             <van-divider content-position="left">街区机构&nbsp;&nbsp;&nbsp;&nbsp;<span>{{addres}}</span></van-divider>
             <van-divider content-position="left">手机号码&nbsp;&nbsp;&nbsp;&nbsp;<span>{{phone}}</span></van-divider>
             <van-divider content-position="left">时间&nbsp;&nbsp;&nbsp;&nbsp;<span>{{time}}</span></van-divider>
             <!-- 虚线 -->
             <van-divider class="dash"></van-divider>
             <van-button  class="footer-btn" @click="gockmemo" round color="blue" plain size="mini">接种记录</van-button>
        </div>
        <!-- 底部没有更多 -->
        <p>没有更多了..</p>
        </div>
        <!-- <van-button type="default" class="btn" url="/vant/mobile.html">请登录</van-button> -->
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            name:'',
            addres:'',
            phone:'',
            time:'', 
            state:''   
        }
    },
    methods: {
        onClickLeft(){
            history.back();
        },
        gockmemo(){
            //跳转接种记录
            this.$router.push("/ckmemo");
        }
    },
    mounted:function(){
             //自调用
             var __this = this;
            //  console.log(__this.name)
            // console.log(__this.uid)
            let id = sessionStorage.getItem('uid')
            // console.log(uid)
             axios.get('http://127.0.0.1:3000/psearch',{params:{uid:id}}).then(res=>{
                //  console.log(res);
                //  console.log(this)
               if(res.data.code===200){
                   //获取名字
                __this.name=res.data.results[0].peop_name
                //获取小区
                __this.addres=res.data.results[0].peop_ck_address
                //获取电话
                __this.phone=res.data.results[0].peop_phone
                //获取时间
                let time1 = res.data.results[0].peop_time
                __this.time=new Date(time1).toLocaleString()
                // console.log(time2.toLocaleString())
               }else{
                   __this.state=true;
               }
                

             })
       

       
    }
    
}
</script>
<style scoped>
    .div{
        height: 97vh;
        background-color: rgb(247, 247, 247);
    }
    .box{
        margin-top: 46px;
        border: 1px solid rgb(199, 199, 199);
        width: 90%;
        margin: 47px auto;
        border-radius: 10px;
        background-color: white;
        position: relative;
    }
    div>p{
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: 14px;
        text-align: center;
    }
    .footer-btn{
        position: absolute;
        margin-top: -27px;
        right: 10px;
        
    }
    .dash{
        /* 虚线 */
        width: 95%;
        margin:30px auto;
        border-bottom: 1px dashed black;

    }
    .box>>>.status{
        position: absolute;
        right: 10px;
    }
    .btn{
        margin-top: 50px;
        border: 1px solid rgb(190, 190, 190);
        display: block;
        margin: 0 auto;
    }
</style>
